<template>
  
  
  <div class="sm-sman-smanagementGoods">
    <div>
      <p>
        <el-button size="mini" type="primary" style="margin:2px 3px" @click="onePounch">一键确认</el-button>
      </p>
    </div>
    <div class="smgXgoodsGzbBox">
      
      <div v-if="gzbTm != ''">
        <el-button type="text" @click="searchMaterialInfo()">工作包信息&nbsp;&nbsp;{{gzbTm}} </el-button><span v-if="isNeedBack" style="color:red">(该工作包需要回库)</span>
      </div>
      <div v-else>
        工作包信息&nbsp;&nbsp;{{gzbTm}}<span v-if="isNeedBack" style="color:red">(该工作包需要回库)</span>
      </div>
      <ul>
        <li v-for="(value, index) in gzbInfo" :key="index">
          <!-- <p>待分拣物料信息</p> -->
          
          <p v-if="!value.mesCheckQualiticationId">
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p>
            AO编号：<span style="margin-left: 3px">{{ value.aoCode }}</span>
          </p> 
          <p v-if="value.mesCheckQualiticationId">
            合格证号：<span style="margin-left: 3px">{{ value.mesCheckQualiticationId }}</span>
          </p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <!-- <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p> -->
          <p>
            物料数量：<span style="margin-left: 3px">{{ value.matchQty }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="sm-sman-rightInfo">
      <div>缓存箱信息&nbsp;&nbsp;{{hcxTm}}</div>
      <ul>
        <li v-for="(value, index) in hcxInfo" :key="index">
          <!-- <p>待分拣物料信息</p> -->
          <!-- <p>
            缓存箱条码：<span style="margin-left: 3px">{{ value.workbinCode }}</span>
          </p> -->
          <p v-if="!value.mesCheckQualiticationId">
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p v-if="value.mesCheckQualiticationId">
            合格证号：<span style="margin-left: 3px">{{ value.mesCheckQualiticationId }}</span>
          </p>
          <p>工作包编号：<span style="margin-left: 3px">{{ value.packageCode }}</span></p>
          <p>AO编号：<span style="margin-left: 3px">{{ value.aoCode }}</span></p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            待分拣数量：<span style="margin-left: 3px;"><el-input size="mini" v-model="value.matchQty"></el-input></span>
          </p>
          <p>物料确认状态：
            <span style="margin-left:3px" ref="materialStatus" v-if="!value.isConfirm">未确认</span>
            <span style="margin-left:3px;color:blue" ref="materialStatus" v-if="value.isConfirm">已确认</span>
          </p>
          <el-button size="mini" type="primary" style="margin:5px 3px" @click="openRightWorkbinBox(index)">矫正缓存箱数据</el-button>
          <el-button size="mini" type="primary" style="margin:5px 3px" @click="openReplaceView(value)">更换物料</el-button>
        </li>
      </ul>
      <!--更换物料抽屉-->
      <div>
        <el-drawer title="物料替换" size="75%" :visible.sync="drawer.drawer" :direction="drawer.direction" :before-close="handleClose">
          <el-button style="margin-left:5px;margin-bottom:3px" type="primary" size="mini" @click="saveReplaceData">替换</el-button>  
          <el-row>
            <el-col :span="10">
              <slot>已配套物料</slot>
              <el-table :data="drawer.leftdata" border height=500  >
                <el-table-column prop="itemCode" label="图号" width="180" resizable> </el-table-column>
                <el-table-column prop="qualityCode" label="质量编号" width="100" resizable> </el-table-column>
                <el-table-column prop="matchQty" label="配套数量" resizable> </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="14">
              <slot>可配套物料</slot>
              <el-table :data="drawer.rightData" border height=500 >
                <el-table-column prop="itemCode" label="图号" width="180" resizable > </el-table-column>
                <el-table-column prop="qualityCode" label="质量编号" width="100" resizable> </el-table-column>
                <el-table-column prop="itemQty" label="库存数量" resizable> </el-table-column>
                <el-table-column prop="replaceQty" label="替换数量" resizable>
                  <template slot-scope="scope">
                    <input type="text" style="width:80px" v-model="drawer.rightData[scope.$index].replaceQty"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-drawer>
      </div>
      <div>

        <el-drawer title="物料信息" size="75%" height="500" :visible.sync="drawer2.drawer" :direction="drawer2.direction" :before-close="handleClose2" :append-to-body="drawer2.drawer">
          <el-row>
            <el-col :span="24">
              <el-table :data="drawer2.materialTableData" border height=440  >
                <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column property="state" label="配套状态" width="90" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="isSort" label="分拣状态" width="90" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="requiredDeliveryTime" label="日计划时间" width="170" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="itemCode" label="图号" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="qualityCode" label="质量编号" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="aoCode" label="AO编码" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="packageCode" label="工作包编码" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="productCode" label="机型" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="batchNo" label="批次" width="70" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="startPlaneNo" label="架次" width="70" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="itemName" label="物料名称" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="itemQty" label="需求数量" width="90" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="matchQty" label="配套数量" width="90" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="barCode" label="条码号" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="workbinCode" label="缓存箱编码" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="repartAss" label="装配图号" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="artChangeType" label="工艺更改类型" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="mesCheckQualiticationId" label="合格证" v-if="false"></el-table-column>
              </el-table>
              
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage"
              :page-sizes="[50,100, 200, 300, 400]" :page-size="page.pageSize"  layout="total, sizes, prev, pager, next" :total="page.total">
              </el-pagination>
            </el-col>
          </el-row>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: "SortingManagementGoods",
  data() {
    return {
      hcxInfo: [],
      recivedMaterial:[],
      gzbInfo: [],
      hcxTm:'',
      gzbTm:'',
      qqlist: [],
      num:'',
      indexNumber:'',
      nowMaterial:'',
      newGzbList:[],
      //已经确认物料个数
      cheakMaterialNum:0,
      isConfirm:false,
      backgroundColorList:["color1","color2","color3"],
      isNeedBack:false,
      drawer:{
        drawer:false,
        direction:"rtl",
        leftdata:[],
        rightData:[]
      },
      drawer2:{
        drawer:false,
        direction:"rtl",
        materialTableData:[],
      },
      page:{
        total:1,
        pageSize:50,
        currentPage:1
      },
      workPackageInfo:{}
    };
  },
  methods: {
    handleSizeChange(val){
      this.page.pageSize = val;
    },
    handleCurrentChange(val){
      this.page.currentPage = val;
      this.$options.methods.searchMaterialInfo.bind(this)();
    },
    // input聚焦
    blurNum(nums, index) {
       console.log(nums, index);
      for (let i = 0; i < this.hcxInfo.length; i++) {
        if (index == i) {
          this.indexNumber = index
          this.num = nums
          this.maxNum = this.hcxInfo[i].itemQty
        }
      }
    },
    // 输入值后回车 聚焦topinput
      handleTopInput(){
        // 将修改的数据返给首页
        console.log(this.gzbInfo)
        this.$bus.$emit('gzbListInfoss','re')
      },
      //yebo 
      openRightWorkbinBox(index){
        this.$prompt('请输入缓存箱实际物料数量', '注意', {
            confirmButtonText: '保存',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            this.hcxInfo[index].rightQty = value;
            this.$options.methods.rightWorkbin.bind(this)(index);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });
      },
      rightWorkbin(index){
        console.log("index",index);
        for (let i = 0; i < this.hcxInfo.length; i++) {
          if (index == i) {
            console.log("缓存箱表id",this.hcxInfo[i]);
            request.post("/materialReceipt/rightWorkbin",{data:this.hcxInfo[i]}).then((res)=>{
              console.log(res);
              if(res.data.retCode=='201'){
                  this.$Alert({
                    title: "失败",
                    message: res.data.retMsg,
                    type: "error",
                  });
              }else{
                this.$Alert({
                  title: "成功",
                  message: res.data.retMsg,
                  type: "success",
              })
              }
          })
        }
      }
        
    },
    onePounch(){ //一键确认
      console.log("缓存箱物料数",this.hcxInfo);
      this.$bus.$emit('scanBarcode',this.hcxInfo);
    },
    handleClose(done){
      done();
    },
    handleClose2(done){
      done();
    },
    openReplaceView(value){
      this.drawer.drawer = true;
      this.drawer.leftdata = [];
      this.drawer.leftdata.push(value);
      console.log("value",value);
      //查询缓存箱子相同图号的其他物料
      request.post("/PointPackageSortRest/queryWorkbinMaterial",value).then((res)=>{
        console.log("rightres",res);
        this.drawer.rightData = res.data;
      });
    },
    saveReplaceData(){//保存替换的物料数据
      console.log("this.drawer.rightData",this.drawer.rightData);
      request.post("/PointPackageSortRest/replaceMatchInfo",{"sourceMatch":this.drawer.leftdata[0],"replaceMatchList":this.drawer.rightData}).then((res)=>{
        console.log("替换完成返回参数",res);
        if(res.data.retCode==200){
          this.$Alert({title: "成功",message: res.data.message,type: "success"});
        }else{
          this.$Alert({title: "失败",message: res.data.message,type: "error"});
        }
      });
    },
    // 查询工作包下的物料信息
    searchMaterialInfo(){
      if(this.hcxInfo.length==0){
        this.$Alert({title:"提示",tyipe:"success",message:"请先扫码缓存箱"});
        return;
      }
      var msTaskPackageId = this.hcxInfo[0].msTaskPackageId;
      this.drawer2.drawer = true;
      var that = this;
      var queryParam = {
        packageId:this.workPackageInfo.MSTASKPACKAGEID,
        palletCode:this.gzbTm,
        packageCode:this.workPackageInfo.PACKAGECODE,
        msTaskPackageId:msTaskPackageId
      };
      request.post("/MsAoMachInfo/selectMaterial",{"page":this.page,"queryParam":queryParam}).then((res)=>{
        console.log(res);
        that.drawer2.materialTableData = res.data.list;
        that.page.total = res.data.total;
      });
    },
  },
  mounted() {
      //
      this.$bus.$on("reladGzbTip",(e)=>{

      });
      // 接收首页传来的缓存箱信息
      this.$bus.$on("smsmnSendHcxInfos", (e) => {
        console.log("ces",e);
        this.hcxInfo = e.res;
        for(let i=0;i<this.hcxInfo.length;i++){
          this.hcxInfo[i].outQty = this.hcxInfo[i].matchQty;
          console.log(this.$refs.materialStatus);
        }
        this.hcxTm = e.hcxtm;
      
      });

      // 接收工作包
      this.$bus.$on("smsmnSendGzbInfo", (e) => {
      //  this.gzbInfo = e.res;
        console.log("gongzuobao ",e);
        this.gzbTm = e.gzbtm;
        //每次扫码工作包时，重置缓存箱子
       // this.hcxInfo = [];
        this.gzbInfo = [];
        this.recivedMaterial = [];
       // this.hcxTm = "";
        // 显示工作包信息框
        let gzbInfoBox = document.querySelector('.smgXgoodsGzbBox')
        gzbInfoBox.style.display = 'block'
        // console.log(gzbInfoBox)
      });
      // 接收首页物料扫码确认的下标 smsmaninput
      this.$bus.$on('smSmanMaterialNumber',(e)=>{
        console.log("确认物料",e);
        console.log("确认物料缓存箱",this.hcxInfo);
        //yebo 新增 扫条码显示工作包信息
      /*  for(var i=0;i<this.recivedMaterial.length;i++){
          if(this.recivedMaterial[i].barcode==this.hcxInfo[e].barcode){
            return ;
          }
        }
        this.recivedMaterial.push(this.hcxInfo[e]);*/
        this.hcxInfo[e].outQty = this.hcxInfo[e].matchQty;
        this.gzbInfo.push(this.hcxInfo[e]);
        this.$emit('receiveGzb',this.hcxInfo[e]);//将扫码工作包数据回传到主界面中
        if(this.gzbInfo.length==this.hcxInfo.length){

        }
        
        // console.log(this.hcxInfo[e])
        this.nowMaterial = this.hcxInfo[e]
        this.hcxInfo[e].isConfirm = true;
        console.log("物料扫码",this.hcxInfo)
        //已经确认物料个数+1
        this.cheakMaterialNum++
        // 将已经确认物料个数传给index的进度动画
        this.$bus.$emit('somgXgoodsCmn',this.cheakMaterialNum)
       // this.gzbInfo = this.hcxInfo;//工作包只显示缓存箱扫码的物料
        this.$bus.$emit('gzbListInfoss','re')
      })
      // 缓存箱回库后或者工作包回库后 将上一个hcx数据框清空
      this.$bus.$on('sotmgHcxclear',(e)=>{
        this.hcxInfo = [];
        this.gzbInfo = [];
        this.recivedMaterial = [];
        this.hcxTm = "";
        this.gzbTm = "";
        this.reload();
      });
      this.$bus.$on('sendWorkPackageInfo', (e) => { this.workPackageInfo = e.searchParams })
    },
    watch:{
      num(newValue,oldValue){
        this.qqlist = this.hcxInfo
      }
    }
}
</script>
<style scoped>
.sm-sman-smanagementGoods {
  width: 100%;
  /* background: red; */
}
.smgXgoodsGzbBox {
  float: right;
  width: 50%;
  display: none;
  /* height: 300px; */
  /* border: 1px solid black; */
  /* background: #3375d7; */
}
.smgXgoodsGzbBox ul li {
  float: left;
  padding: 0 10px;
  width: 280px;
  /* height: 330px; */
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
/* .smgXgoodsGzbBox ul li p:nth-child(1) {
  text-align: center;
} */
.smgXgoodsGzbBox ul li p {
  margin-top: 10px;
}
.sm-sman-rightInfo {
  float: left;
  width: 50%;
  /* background-color: aquamarine; */
  /* height: 400px; */
  display: none;
}
.sm-sman-rightInfo ul li {
  float: left;
  padding: 0 5px;
  width: 290px;
  /* height: 330px; */
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
/* .sm-sman-rightInfo ul li p:nth-child(1) {
  text-align: center;
} */
.sm-sman-rightInfo ul li p {
  margin-top: 10px;
}
.el-input {
  width: 60px;
  font-size: 18px;
}
.color1 {
  color: black;
}
.color2 {
  color: blue;
}
.color3 {
  color: green;
}
</style>